<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 1000px;
            height: 500px;
            border: 1px solid red;
        }
       .parent .child{
           float: left;
           padding: 10px;
           margin: 10px;
          /* margin: 10px 20px;!*上下 左右*!
           margin: 10px 20px 10px 10px;!*上右下左*!*/
           cursor: pointer;/*箭头变成小手*/
           /*cursor: crosshair;!*箭头变成十字线*!*/
           width: 200px;
           height: 200px;
           background-color: #ffafc9;
           border: 10px solid green;
        }
        .parent .child:last-child{/*last-child伪类*/
           /* first-child，设置第一个颜色*/
            background-color: #00d7c6;
            float: right;
        }
        .parent .child:hover{/*鼠标放在图片上，图片可以显示指定的颜色*/
            /*background-color: #00d7c6;*/
          /* 改变长款让图片变大*/
            width: 300px;/*把图片变宽*/
            height: 300px;/*把图片变长*/
          /*  float: right;闪屏效果*/
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">你好你好你好你好</div>
    <div class="child">我好</div>
</div>
</body>
</html>